<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="utf-8"/>
 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <meta name="keywords" content="SWAKX 快速开发框架"/>
 <meta name="description" content="SWAKX 快速开发框架"/>
 <link rel="icon" href="/favicon.ico"/>
 <title>SWAKX 快速开发框架</title>
 <style>
   html,
   body,
   #app {
     height: 100%;
     margin: 0px;
     padding: 0px;
   }

   .chromeframe {
     margin: 0.2em 0;
     background: #ccc;
     color: #000;
     padding: 0.2em 0;
   }

   #loader-wrapper {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 999999;
   }

   #loader {
     display: block;
     position: relative;
     left: 50%;
     top: 50%;
     width: 150px;
     height: 150px;
     margin: -75px 0 0 -75px;
     border-radius: 50%;
     border: 3px solid transparent;
     border-top-color: #FFF;
     -webkit-animation: spin 2s linear infinite;
     -ms-animation: spin 2s linear infinite;
     -moz-animation: spin 2s linear infinite;
     -o-animation: spin 2s linear infinite;
     animation: spin 2s linear infinite;
     z-index: 1001;
   }

   #loader:before {
     content: "";
     position: absolute;
     top: 5px;
     left: 5px;
     right: 5px;
     bottom: 5px;
     border-radius: 50%;
     border: 3px solid transparent;
     border-top-color: #FFF;
     -webkit-animation: spin 3s linear infinite;
     -moz-animation: spin 3s linear infinite;
     -o-animation: spin 3s linear infinite;
     -ms-animation: spin 3s linear infinite;
     animation: spin 3s linear infinite;
   }

   #loader:after {
     content: "";
     position: absolute;
     top: 15px;
     left: 15px;
     right: 15px;
     bottom: 15px;
     border-radius: 50%;
     border: 3px solid transparent;
     border-top-color: #FFF;
     -moz-animation: spin 1.5s linear infinite;
     -o-animation: spin 1.5s linear infinite;
     -ms-animation: spin 1.5s linear infinite;
     -webkit-animation: spin 1.5s linear infinite;
     animation: spin 1.5s linear infinite;
   }


   @-webkit-keyframes spin {
     0% {
       -webkit-transform: rotate(0deg);
       -ms-transform: rotate(0deg);
       transform: rotate(0deg);
     }

     100% {
       -webkit-transform: rotate(360deg);
       -ms-transform: rotate(360deg);
       transform: rotate(360deg);
     }
   }

   @keyframes spin {
     0% {
       -webkit-transform: rotate(0deg);
       -ms-transform: rotate(0deg);
       transform: rotate(0deg);
     }

     100% {
       -webkit-transform: rotate(360deg);
       -ms-transform: rotate(360deg);
       transform: rotate(360deg);
     }
   }


   #loader-wrapper .loader-section {
     position: fixed;
     top: 0;
     width: 51%;
     height: 100%;
     background: #7171C6;
     z-index: 1000;
     -webkit-transform: translateX(0);
     -ms-transform: translateX(0);
     transform: translateX(0);
   }

   #loader-wrapper .loader-section.section-left {
     left: 0;
   }

   #loader-wrapper .loader-section.section-right {
     right: 0;
   }


   .loaded #loader-wrapper .loader-section.section-left {
     -webkit-transform: translateX(-100%);
     -ms-transform: translateX(-100%);
     transform: translateX(-100%);
     -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
     transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
   }

   .loaded #loader-wrapper .loader-section.section-right {
     -webkit-transform: translateX(100%);
     -ms-transform: translateX(100%);
     transform: translateX(100%);
     -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
     transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
   }

   .loaded #loader {
     opacity: 0;
     -webkit-transition: all 0.3s ease-out;
     transition: all 0.3s ease-out;
   }

   .loaded #loader-wrapper {
     visibility: hidden;
     -webkit-transform: translateY(-100%);
     -ms-transform: translateY(-100%);
     transform: translateY(-100%);
     -webkit-transition: all 0.3s 1s ease-out;
     transition: all 0.3s 1s ease-out;
   }

   .no-js #loader-wrapper {
     display: none;
   }

   .no-js h1 {
     color: #222222;
   }

   #loader-wrapper .load_title {
     font-family: 'Open Sans';
     color: #FFF;
     font-size: 19px;
     width: 100%;
     text-align: center;
     z-index: 9999999999999;
     position: absolute;
     top: 60%;
     opacity: 1;
     line-height: 30px;
   }

   #loader-wrapper .load_title span {
     font-weight: normal;
     font-style: italic;
     font-size: 13px;
     color: #FFF;
     opacity: 0.5;
   }
 </style>
</head>
<body>
<div id="app">
 <div id="loader-wrapper">
  <div id="loader"></div>
  <div class="loader-section section-left"></div>
  <div class="loader-section section-right"></div>
  <div class="load_title">正在加载系统资源，请耐心等待</div>
 </div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
